new Vue({
  el: '#app',
  data() {
    return {
      isStart: false,
      nextTime: new Date(),
      isTimeout: false,
      timeoutText: '00:00:00',
      timer: null,
    };
  },
  computed: {
    nextTimeText() {
      if (this.isStart) {
        const isNextDay = this.nextTime.getDate() - (new Date().getDate()) > 0;
        const [hours, minutes] = [this.nextTime.getHours(), this.nextTime.getMinutes()];
        return `${isNextDay ? '明天' : ''}${hours > 12 ? '下午' : ''}${hours % 12}点${minutes > 0 ? `${minutes}分` : ''}`;
      }
      return '';
    },
  },
  created() {
    if (!("Notification" in window)) {
      console.log("This browser does not support desktop notification");
    }
    // 否则我们需要向用户获取权限
    else if (Notification.permission !== "denied") {
      Notification.requestPermission();
    }
  },
  methods: {
    handleStart() {
      this.isStart = true;
      this.isTimeout = false;
      this.$refs.v.pause();
      this.updateNextTime();
      this.updateTimeout();
    },
    handleStop() {
      this.isStart = false;
      this.isTimeout = false;
      this.$refs.v.pause();
    },
    handleTimeout() {
      this.isStart = false;
      this.updateTimeout();
      this.isTimeout = true;
      this.$refs.v.currentTime = 0
      this.$refs.v.play();
      this.notify('饮茶🍵 时间到⏰ ～～');
      // alert('饮茶🍵 时间到！');
    },
    updateTimeout() {
      if (this.isStart) {
        let seconds = Math.floor((this.nextTime - Date.now()) / 1000);
        if (seconds < 0) {
          return this.handleTimeout();
        }
        let minutes = Math.floor(seconds / 60);
        seconds -= minutes * 60;
        let hours = Math.floor(minutes / 60);
        minutes -= hours * 60;
        this.timeoutText = [hours, minutes, seconds].map(i => `0${i}`.slice(-2)).join(':');
        // requestAnimationFrame(() => this.updateTimeout());
        setTimeout(() => this.updateTimeout(), 20);
      } else {
        this.timeoutText = '00:00:00';
      }
    },
    updateNextTime() {
      const now = new Date();
      const [hours, date] = [now.getHours(), now.getDate()];
      const minutes = now.getMinutes() + now.getSeconds() / 60;
      const ALERT_HOURS = 15;
      const AFTER_MINUTES = 10;
      if (hours < ALERT_HOURS) {
        now.setHours(ALERT_HOURS, 0, 0, 0);
        this.nextTime = now;
      } else if (hours > ALERT_HOURS || minutes > (60 - AFTER_MINUTES)) {
        now.setDate(date + 1);
        now.setHours(ALERT_HOURS, 0, 0, 0);
        this.nextTime = now;
      } else {
        now.setHours(ALERT_HOURS, Math.ceil(minutes / AFTER_MINUTES) * AFTER_MINUTES, 0, 0);
        this.nextTime = now;
      }
    },
    notify(message) {
      // 先检查浏览器是否支持
      if (!("Notification" in window)) {
        console.log("This browser does not support desktop notification");
      }
      // 检查用户是否同意接受通知
      else if (Notification.permission === "granted") {
        new Notification(message);
      }

      // 否则我们需要向用户获取权限
      else if (Notification.permission !== "denied") {
        Notification.requestPermission().then(function (permission) {
          // 如果用户接受权限，我们就可以发起一条消息
          if (permission === "granted") {
            new Notification(message);
          }
        });
      }
    }
  },
});